<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基于案件状态的流程自动定位测试</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
            line-height: 1.6;
            color: #333;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .test-container {
            background: white;
            border-radius: 8px;
            padding: 30px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }
        .test-section {
            margin-bottom: 30px;
            padding: 20px;
            border: 1px solid #e8e8e8;
            border-radius: 6px;
            background: #fafafa;
        }
        .test-title {
            font-size: 18px;
            font-weight: 600;
            color: #1890ff;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 2px solid #1890ff;
        }
        .status-scenario {
            margin: 15px 0;
            padding: 15px;
            background: white;
            border-radius: 8px;
            border: 1px solid #e8e8e8;
        }
        .status-code {
            display: inline-block;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: 600;
            margin-right: 10px;
        }
        .status-code.to-audit { background: #fff7e6; color: #fa8c16; }
        .status-code.pre-audit-success { background: #f6ffed; color: #52c41a; }
        .status-code.audit-success { background: #e6f7ff; color: #1890ff; }
        .status-code.audit-failed { background: #fff2f0; color: #ff4d4f; }
        .status-code.auditing { background: #f0f5ff; color: #722ed1; }
        .workflow-step {
            display: flex;
            align-items: center;
            margin: 10px 0;
            padding: 10px;
            background: #f8f9fa;
            border-radius: 6px;
            border-left: 4px solid #1890ff;
        }
        .step-number {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: #1890ff;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            font-size: 12px;
            margin-right: 10px;
        }
        .step-content {
            flex: 1;
        }
        .step-title {
            font-weight: 600;
            color: #262626;
            margin-bottom: 2px;
        }
        .step-description {
            color: #666;
            font-size: 13px;
        }
        .code-block {
            background: #f6f8fa;
            border: 1px solid #e1e4e8;
            border-radius: 6px;
            padding: 16px;
            margin: 10px 0;
            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
            font-size: 14px;
            overflow-x: auto;
        }
        .highlight {
            background: #fff2e8;
            padding: 2px 4px;
            border-radius: 3px;
            font-weight: 500;
        }
        .success {
            background: #f6ffed;
            border: 1px solid #b7eb8f;
            border-radius: 6px;
            padding: 12px;
            margin: 10px 0;
        }
        .info {
            background: #e6f7ff;
            border: 1px solid #91d5ff;
            border-radius: 6px;
            padding: 12px;
            margin: 10px 0;
        }
        .warning {
            background: #fff7e6;
            border: 1px solid #ffd591;
            border-radius: 6px;
            padding: 12px;
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <div class="test-container">
        <h1>🎯 基于案件状态的流程自动定位测试</h1>
        
        <div class="test-section">
            <div class="test-title">📋 功能说明</div>
            <p>一键委案详情页面现在会根据案件状态自动定位到合适的流程步骤，用户无需从头开始，可以直接从当前应该执行的步骤开始操作。</p>
        </div>

        <div class="test-section">
            <div class="test-title">🔄 状态映射规则</div>
            
            <div class="status-scenario">
                <div class="status-code to-audit">TO_AUDIT</div>
                <strong>待审核状态</strong>
                <div class="workflow-step">
                    <div class="step-number">0</div>
                    <div class="step-content">
                        <div class="step-title">上传Excel文件</div>
                        <div class="step-description">案件状态：待审核，请上传Excel文件开始流程</div>
                    </div>
                </div>
            </div>
            
            <div class="status-scenario">
                <div class="status-code to-audit">PRE_AUDIT_FAILED</div>
                <strong>预审失败状态</strong>
                <div class="workflow-step">
                    <div class="step-number">0</div>
                    <div class="step-content">
                        <div class="step-title">上传Excel文件</div>
                        <div class="step-description">案件状态：预审失败，请重新上传Excel文件</div>
                    </div>
                </div>
            </div>
            
            <div class="status-scenario">
                <div class="status-code auditing">AUDITING</div>
                <strong>审核中状态</strong>
                <div class="workflow-step">
                    <div class="step-number">2</div>
                    <div class="step-content">
                        <div class="step-title">进行终审</div>
                        <div class="step-description">案件状态：预审通过，请进行终审</div>
                    </div>
                </div>
            </div>
            
            <div class="status-scenario">
                <div class="status-code pre-audit-success">PRE_AUDIT_SUCCESS</div>
                <strong>预审通过状态</strong>
                <div class="workflow-step">
                    <div class="step-number">2</div>
                    <div class="step-content">
                        <div class="step-title">进行终审</div>
                        <div class="step-description">案件状态：预审通过，请进行终审</div>
                    </div>
                </div>
            </div>
            
            <div class="status-scenario">
                <div class="status-code audit-success">AUDIT_SUCCESS</div>
                <strong>终审通过状态</strong>
                <div class="workflow-step">
                    <div class="step-number">4</div>
                    <div class="step-content">
                        <div class="step-title">配置委案参数</div>
                        <div class="step-description">案件状态：终审通过，请配置委案参数</div>
                    </div>
                </div>
            </div>
            
            <div class="status-scenario">
                <div class="status-code audit-failed">AUDIT_FAILED</div>
                <strong>审核失败状态</strong>
                <div class="workflow-step">
                    <div class="step-number">0</div>
                    <div class="step-content">
                        <div class="step-title">重新上传Excel文件</div>
                        <div class="step-description">案件状态：审核失败，请重新上传Excel文件</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="test-section">
            <div class="test-title">💻 技术实现</div>
            
            <div class="test-item">
                <strong>1. 状态检查函数</strong>
                <div class="code-block">
// 根据案件状态设置当前步骤
const setCurrentStepByStatus = (statusCode: string) => {
  console.log('案件状态:', statusCode);
  
  switch (statusCode) {
    case 'TO_AUDIT':
    case 'PRE_AUDIT_FAILED':
      // 待审核或预审失败，需要从上传Excel开始
      currentStep.value = 0;
      stepsStatus.value = 'process';
      message.info('案件状态：待审核，请上传Excel文件开始流程');
      break;
      
    case 'AUDITING':
    case 'PRE_AUDIT_SUCCESS':
      // 预审通过，需要终审
      currentStep.value = 2;
      stepsStatus.value = 'process';
      message.info('案件状态：预审通过，请进行终审');
      break;
      
    case 'AUDIT_SUCCESS':
      // 终审通过，需要委案配置
      currentStep.value = 4;
      stepsStatus.value = 'process';
      message.info('案件状态：终审通过，请配置委案参数');
      break;
      
    case 'AUDIT_FAILED':
      // 审核失败，需要重新审核
      currentStep.value = 0;
      stepsStatus.value = 'error';
      message.warning('案件状态：审核失败，请重新上传Excel文件');
      break;
      
    default:
      // 其他状态，默认从上传开始
      currentStep.value = 0;
      stepsStatus.value = 'wait';
      message.info('案件状态未知，请从上传Excel文件开始');
      break;
  }
};
                </div>
            </div>
            
            <div class="test-item">
                <strong>2. 页面初始化时调用</strong>
                <div class="code-block">
// 获取案件详情
const fetchCaseDetail = async () => {
  caseData.loading = true;
  try {
    const result = await getReviewDetail(caseId);
    
    if (result.success && result.result) {
      Object.assign(caseData, result.result);
      
      // 自动设置批次名称
      if (result.result.batchName && !entrustForm.batchName) {
        entrustForm.batchName = result.result.batchName;
      }
      
      // 根据案件状态设置流程步骤
      setCurrentStepByStatus(result.result.state?.code);
      
    } else {
      message.error('获取案件详情失败');
    }
  } catch (error) {
    console.error('获取案件详情失败:', error);
    message.error('获取案件详情失败，请重试');
  } finally {
    caseData.loading = false;
  }
};
                </div>
            </div>
            
            <div class="test-item">
                <strong>3. 终审直接启动功能</strong>
                <div class="code-block">
// 开始终审
const handleStartFinalAudit = async () => {
  try {
    isProcessing.value = true;
    currentStep.value = 2;
    stepsStatus.value = 'process';
    message.info('开始执行终审...');
    
    // 调用终审接口
    const finalAuditResult = await finalAuditUploadRecordEntrust({
      id: caseId,
      state: 'AUDIT_SUCCESS',
      tsToken: localStorage.getItem('tsToken') || ''
    });
    
    if (!finalAuditResult.success) {
      throw new Error(finalAuditResult.message || '终审失败');
    }
    
    message.success('终审提交成功，等待状态更新...');
    
    // 等待终审状态更新为AUDIT_SUCCESS
    await waitForStatusUpdate('AUDIT_SUCCESS', '终审状态更新');
    
    // 执行定时任务
    currentStep.value = 3;
    message.info('开始执行定时任务...');
    
    const { executeTask } = useScheduledTask();
    const taskResult = await executeTask();
    
    if (!taskResult) {
      throw new Error('定时任务执行失败');
    }
    
    message.success('定时任务完成');
    
    // 进入委案配置
    currentStep.value = 4;
    message.info('请配置委案参数');
    
  } catch (error) {
    console.error('终审流程执行失败:', error);
    const errorMessage = error instanceof Error ? error.message : '执行失败，请重试';
    message.error(errorMessage);
    
    currentStep.value = 6;
    stepsStatus.value = 'error';
  } finally {
    isProcessing.value = false;
  }
};
                </div>
            </div>
        </div>

        <div class="test-section">
            <div class="test-title">🧪 测试场景</div>
            
            <div class="test-item">
                <strong>场景1：待审核案件</strong>
                <ol>
                    <li>打开案件ID为待审核状态的案件详情页</li>
                    <li>验证页面自动定位到步骤0（上传Excel）</li>
                    <li>验证显示提示信息："案件状态：待审核，请上传Excel文件开始流程"</li>
                    <li>验证步骤指示器显示正确的当前步骤</li>
                </ol>
            </div>
            
            <div class="test-item">
                <strong>场景2：预审通过案件</strong>
                <ol>
                    <li>打开案件ID为预审通过状态的案件详情页</li>
                    <li>验证页面自动定位到步骤2（终审）</li>
                    <li>验证显示提示信息："案件状态：预审通过，请进行终审"</li>
                    <li>验证显示"开始终审"按钮</li>
                    <li>点击按钮验证终审流程执行</li>
                </ol>
            </div>
            
            <div class="test-item">
                <strong>场景3：终审通过案件</strong>
                <ol>
                    <li>打开案件ID为终审通过状态的案件详情页</li>
                    <li>验证页面自动定位到步骤4（委案配置）</li>
                    <li>验证显示提示信息："案件状态：终审通过，请配置委案参数"</li>
                    <li>验证委案配置表单正常显示</li>
                    <li>验证"开始一键委案"按钮可以正常点击</li>
                </ol>
            </div>
            
            <div class="test-item">
                <strong>场景4：审核失败案件</strong>
                <ol>
                    <li>打开案件ID为审核失败状态的案件详情页</li>
                    <li>验证页面自动定位到步骤0（上传Excel）</li>
                    <li>验证显示警告信息："案件状态：审核失败，请重新上传Excel文件"</li>
                    <li>验证步骤状态显示为错误状态</li>
                </ol>
            </div>
        </div>

        <div class="test-section">
            <div class="test-title">✨ 用户体验优化</div>
            
            <div class="success">
                <strong>智能定位</strong>
                <ul>
                    <li>根据案件状态自动跳转到合适的步骤</li>
                    <li>避免用户重复执行已完成的操作</li>
                    <li>提供清晰的状态提示信息</li>
                </ul>
            </div>
            
            <div class="info">
                <strong>状态反馈</strong>
                <ul>
                    <li>不同状态显示不同颜色的提示信息</li>
                    <li>成功状态显示绿色提示</li>
                    <li>错误状态显示红色警告</li>
                    <li>信息状态显示蓝色提示</li>
                </ul>
            </div>
            
            <div class="warning">
                <strong>注意事项</strong>
                <ul>
                    <li>确保案件状态API返回正确的状态码</li>
                    <li>状态映射规则需要与后端保持一致</li>
                    <li>建议添加状态变更的实时监听</li>
                </ul>
            </div>
        </div>

        <div class="test-section">
            <div class="test-title">🔧 配置说明</div>
            
            <div class="test-item">
                <strong>状态码配置</strong>
                <div class="code-block">
// 状态码映射配置
const STATUS_MAPPING = {
  'TO_AUDIT': { step: 0, status: 'process', message: '案件状态：待审核，请上传Excel文件开始流程' },
  'PRE_AUDIT_FAILED': { step: 0, status: 'process', message: '案件状态：预审失败，请重新上传Excel文件' },
  'AUDITING': { step: 2, status: 'process', message: '案件状态：预审通过，请进行终审' },
  'PRE_AUDIT_SUCCESS': { step: 2, status: 'process', message: '案件状态：预审通过，请进行终审' },
  'AUDIT_SUCCESS': { step: 4, status: 'process', message: '案件状态：终审通过，请配置委案参数' },
  'AUDIT_FAILED': { step: 0, status: 'error', message: '案件状态：审核失败，请重新上传Excel文件' }
};
                </div>
            </div>
            
            <div class="test-item">
                <strong>步骤定义</strong>
                <div class="code-block">
// 流程步骤定义
const WORKFLOW_STEPS = [
  { step: 0, title: '上传Excel', description: '上传审核Excel文件' },
  { step: 1, title: '初审', description: '执行初审流程' },
  { step: 2, title: '终审', description: '执行终审流程' },
  { step: 3, title: '定时任务', description: '执行定时任务' },
  { step: 4, title: '委案配置', description: '配置委案参数' },
  { step: 5, title: '委案', description: '执行委案流程' },
  { step: 6, title: '完成', description: '委案流程完成' }
];
                </div>
            </div>
        </div>

        <div class="test-section">
            <div class="test-title">🎉 功能完成确认</div>
            
            <div class="test-item">
                <span style="color: #52c41a; font-weight: 600;">✅ 已完成</span>
                <strong>状态自动定位</strong>
                <p>页面打开时自动根据案件状态定位到合适的流程步骤</p>
            </div>
            
            <div class="test-item">
                <span style="color: #52c41a; font-weight: 600;">✅ 已完成</strong>
                <strong>预审通过案件</strong>
                <p>预审通过的案件直接显示终审操作按钮</p>
            </div>
            
            <div class="test-item">
                <span style="color: #52c41a; font-weight: 600;">✅ 已完成</span>
                <strong>终审通过案件</strong>
                <p>终审通过的案件直接显示委案配置表单</p>
            </div>
            
            <div class="test-item">
                <span style="color: #52c41a; font-weight: 600;">✅ 已完成</span>
                <strong>状态提示信息</strong>
                <p>不同状态显示相应的提示信息和操作指引</p>
            </div>
        </div>
    </div>
</body>
</html>
